<template>
  <router-view/>
  <NavBar v-if="state.isShowNav"/>
</template>
<script setup lang="ts">
import {reactive} from 'vue';
import NavBar from "@/components/NavBar/index.vue";

import {useRouter} from "vue-router";

const needNavList = ['home', 'category', 'cart', 'user'] // 需要导航的页面
const state = reactive({
  isShowNav: true // 是否显示导航
})
const router = useRouter();
router.beforeEach((to) => {
  state.isShowNav = !!(to.name && needNavList.includes((to.name as string).toLowerCase()));
})
</script>
<style lang="less">
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}
</style>